<script setup lang="ts">
import SkyUploadImage from "@/components/SkyUpload/image.vue";
import {useRoute} from "vue-router";
import {useSkyDept, useSkyDeptObj} from "@/hooks/dept";
import {useSkyDict} from "@/hooks/dict";
import {useScreenStore} from "@/hooks/screen";
import {fieldVisible, getToday} from "@/utils";
import {skyNoticeSuccess, skyNoticeError, skyMsgError, skyMsgWarning, skyMsgBox, skyMsgInfo, skyMsgSuccess} from "@/utils/sky.js";
import {listTree} from "@/apis/sky/system/dept";
import {listAll as postListAll} from "@/apis/sky/system/post";
import {listAll as roleListAll} from "@/apis/sky/system/role";
import {
  add,
  exportExcel,
  deleteById,
  batchDelete,
  update,
  listPage,
  getById
} from "@/apis/sky/system/user";
import {Avatar, CircleCloseFilled, DArrowLeft} from "@element-plus/icons-vue";

const route = useRoute();
// 获取当前为[移动端、IPad、PC端]仓库，阔以使用 watchEffect(() => {}) 进行监听。
const {isScreen} = useScreenStore();
/** 适配移动端结束 */
const {skyDept} = useSkyDept();
const {skyDict} = useSkyDict(["性别", "用户类型", "数据权限范围"]);
const skyExcelRef = ref();
const skyDrawerRef = ref();
const treeRef = ref();
const formRef = ref();
const pageData = ref({
  props: {children: "children", label: "name"},
  treeData: [],
  showSearch: true,
  pageParams: {
    creator: null,
    modifier: null,
    status: true,
    username: null,
    email: null,
    mobile: null,
    gender: null,
    name: null,
    dept_id: null,
    page: 1,
    pageSize: 10,
  },
  ids: [],
  single: true,
  multiple: true,
  title: "用户管理",
  confirmLoading: false,
  mobile: false,
  isTree: true,
  form: {
    id: null,
    username: "",
    password: "123456",
    email: "",
    mobile: "",
    avatar: "",
    gender: null,
    name: "",
    first_name: "",
    last_name: "",
    user_type: "0",
    dept_id: null,
    post_id: null,
    role: [],
    sort: 1,
    status: true,
    belong_dept: null,
    remark: null,
  },
  rules: {
    username: [{required: true, message: "请输入用户名", trigger: "blur"}],
    name: [{required: true, message: "请输入姓名", trigger: "blur"}],
    role: [{required: true, message: "请选择用户角色", trigger: "blur"}],
    dept_id: [{required: true, message: "请选择用户岗位", trigger: "blur"}],
    post_id: [{required: true, message: "请选择用户部门", trigger: "blur"}],
  },
  loading: false,
  total: 0,
  showTable: [
    {title: "用户账号", visible: 1},
    {title: "邮箱", visible: 1},
    {title: "电话", visible: 1},
    {title: "头像", visible: 1},
    {title: "性别", visible: 1},
    {title: "姓名", visible: 1},
    {title: "名", visible: 1},
    {title: "姓", visible: 1},
    {title: "用户类型", visible: 1},
    {title: "所属部门", visible: 1},
    {title: "所属岗位", visible: 1},
  ],
  postList: [],
  roleList: [],
  tableList: [],
});
const method = reactive({
  /** 部门列表树 */
  handleListTree: async () => {
    try {
      const res: any = await listTree({});
      pageData.value.treeData = res.data;
    } catch (error) {
      skyMsgError("数据查询失败，请刷新重试🌻");
    }
  },
  /** 选择部门列表树 */
  handleCurrentChange: (val: any) => {
    pageData.value.pageParams.dept_id = val.id;
    pageData.value.pageParams.page = 1;
    pageData.value.pageParams.pageSize = 10;
    method.handleListPage();
  },
  /** 显示树或隐藏树 */
  handleIsTreeOrTable: () => {
    setTimeout(() => {
      pageData.value.mobile = !pageData.value.mobile;
      pageData.value.isTree = !pageData.value.isTree;
    }, 500);
    skyMsgSuccess("切换成功");
  },
  /** 搜索 */
  handleSearch: () => {
    pageData.value.pageParams.page = 1;
    pageData.value.pageParams.pageSize = 10;
    method.handleListPage();
  },
  /** 重置 */
  resetSearch: () => {
    method.resetSearchParams();
    method.handleListPage();
  },
  /** 重置搜索参数 */
  resetSearchParams: () => {
    pageData.value.pageParams = {
      creator: null,
      modifier: null,
      status: true,
      username: null,
      email: null,
      mobile: null,
      gender: null,
      name: null,
      dept_id: null,
      page: 1,
      pageSize: 10,
    };
    treeRef.value.skyClearChecked();
  },
  /** 添加 */
  handleAdd: () => {
    // 打开弹出框
    skyDrawerRef.value.skyOpen();
    // 重置表单
    method.resetForm();
    // 标题
    pageData.value.title = "添加";
  },
  /** 删除 */
  handleDelete: (row: any) => {
    const id = row.id;
    if (id === null || id === "") {
      skyMsgWarning("请选中需要删除的数据🌻");
      return;
    }
    skyMsgBox("您确认需要删除字典名称[" + row.name + "]么？")
      .then(async () => {
        try {
          await deleteById(id);
          await method.handleListPage();
          skyNoticeSuccess("删除成功🌻");
        } catch (error) {
          await method.handleListPage();
          skyNoticeError("删除失败，请刷新重试🌻");
        }
      })
      .catch(() => {
        skyMsgError("已取消🌻");
      });
  },
  /** 批量删除 */
  handleBatchDelete: () => {
    if (pageData.value.ids.length == 0) {
      skyMsgInfo("请选择需要删除的数据🌻");
      return;
    }
    skyMsgBox("您确认需要进行批量删除么？")
      .then(async () => {
        try {
          const res: any = await batchDelete(pageData.value.ids);
          await method.handleListPage();
          skyNoticeSuccess(`${res.msg}🌻`);
        } catch (error) {
          await method.handleListPage();
          skyNoticeSuccess("批量删除失败，请刷新重试🌻");
        }
      })
      .catch(() => {
        skyMsgError("已取消🌻");
      });
  },
  /** 修改 */
  handleUpdate: (row: any) => {
    // 打开弹出框
    skyDrawerRef.value.skyOpen();
    // 重置表单
    method.resetForm();
    pageData.value.title = "修改";
    const id = row ? row.id : pageData.value.ids[0];
    if (id == null || id === "") {
      skyMsgError("请选中需要修改的数据🌻");
    }
    // 回显数据
    method.handleEcho(id);
  },
  /** 回显数据 */
  handleEcho: async (id: any) => {
    if (id === null || id === "") {
      skyMsgWarning("请选择需要修改的数据🌻");
      return;
    }
    try {
      const res = await getById(id);
      res.data.avatar = res.data.avatar ? res.data.avatar : "";
      res.data.gender = res.data.gender + "";
      res.data.user_type = res.data.user_type + "";
      res.data.dept_id = res.data.dept?.id;
      res.data.post_id = res.data.post?.id;
      res.data.password = "123456";
      pageData.value.form = res.data;
    } catch (error) {
      skyNoticeError("数据获取失败，请刷新重试🌻");
    }
  },
  /** 确定  */
  handleConfirm: () => {
    if (!formRef.value) return;
    if (!pageData.value.form.post_id) delete pageData.value.form.post_id;
    if (!pageData.value.form.dept_id) delete pageData.value.form.dept_id;
    pageData.value.confirmLoading = true;
    (formRef.value).validate(async (valid: any) => {
      if (valid) {
        if (pageData.value.form.id) {
          try {
            await update(pageData.value.form.id, pageData.value.form);
            skyNoticeSuccess("修改成功🌻");
            pageData.value.confirmLoading = false;
            skyDrawerRef.value.skyQuickClose();
            method.resetForm();
            await method.handleListPage();
          } catch (error) {
            pageData.value.confirmLoading = false;
            skyNoticeError("修改失败，请刷新重试🌻");
          }
        } else {
          try {
            await add(pageData.value.form);
            skyNoticeSuccess("添加成功🌻");
            pageData.value.confirmLoading = false;
            skyDrawerRef.value.skyQuickClose();
            method.resetForm();
            await method.handleListPage();
          } catch (error) {
            pageData.value.confirmLoading = false;
            skyNoticeError("添加失败，请刷新重试🌻");
          }
        }
      } else {
        skyMsgError("验证失败，请检查填写内容🌻");
        pageData.value.confirmLoading = false;
      }
    });
  },
  /** 取消 */
  handleCancel: () => {
    skyDrawerRef.value.skyClose();
  },
  /** 清空表单数据 */
  resetForm: () => {
    nextTick(() => {
      if (formRef.value) {
        // 重置该表单项，将其值重置为初始值，并移除校验结果
        formRef.value.resetFields();
      }
    });
    pageData.value.form = {
      id: null,
      username: "",
      password: "123456",
      email: "",
      mobile: "",
      avatar: "",
      gender: "1",
      name: "",
      first_name: "",
      last_name: "",
      user_type: "0",
      dept_id: null,
      post_id: null,
      role: [],
      sort: 1,
      status: true,
      belong_dept: null,
      remark: null,
    };
  },
  /** 下载模板 */
  handleTemplateExcel: () => {
    window.location.href = import.meta.env.VITE_GLOB_API_URL + "/static/templates/appUser/用户管理导入模板.xlsx";
    skyMsgSuccess("模板下载成功🌻");
  },
  /** 导出 */
  handleDownload: async () => {
    const res: any = await exportExcel();
    const blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
    const dom = document.createElement('a');
    const downUrl = window.URL.createObjectURL(blob);
    dom.href = downUrl;
    dom.download = `${route.meta.title}[${getToday()}]报表`;
    dom.style.display = 'none';
    document.body.appendChild(dom);
    dom.click();
    dom.parentNode.removeChild(dom);
    window.URL.revokeObjectURL(downUrl);
    skyMsgSuccess("导出成功🌻");
  },
  /** 是否多选 */
  handleSelectionChange: (selection: any) => {
    pageData.value.ids = selection.map((item: any) => item.id);
    pageData.value.single = selection.length !== 1; // 单选
    pageData.value.multiple = !selection.length; // 多选
  },
  /** 数据表格 */
  handleListPage: async () => {
    try {
      pageData.value.loading = true;
      pageData.value.tableList = [];
      const res: any = await listPage(pageData.value.pageParams);
      pageData.value.total = res.data.total;
      pageData.value.tableList = res.data.items;
      pageData.value.loading = false;
    } catch (error) {
      skyMsgError("数据查询失败，请刷新重试🌻");
    }
  },
  /** 获取岗位列表 */
  handlePostList: async () => {
    try {
      const res: any = await postListAll(null);
      pageData.value.postList = res.data;
    } catch (error) {
      skyMsgError("数据查询失败，请刷新重试🌻");
    }
  },
  /** 获取角色列表 */
  handleRoleList: async () => {
    try {
      const res: any = await roleListAll();
      pageData.value.roleList = res.data;
    } catch (error) {
      skyMsgError("数据查询失败，请刷新重试🌻");
    }
  },
});
onMounted(() => {
  pageData.value.mobile = isScreen.value;
  method.handleListTree();
  method.handleListPage();
  method.handlePostList();
  method.handleRoleList();
});
</script>

<template>
  <div class="sky-flex">
    <div v-if="pageData.isTree" class="treeList sky-flex mr2">
      <SkyCard>
        <!-- 数据字典 -->
        <SkyTree
          ref="treeRef"
          tree-name="部门列表"
          :props="pageData.props"
          :treeData="pageData.treeData"
          node-key="name"
          @currentChange="method.handleCurrentChange"
        />
        <!-- 显示表格 -->
        <div v-if="pageData.mobile" class="right">
          <el-tooltip content="显示表格" placement="top">
            <el-button circle icon="DArrowRight" @click="method.handleIsTreeOrTable"/>
          </el-tooltip>
        </div>
      </SkyCard>
    </div>
    <div v-if="!pageData.mobile" class="tableList sky-flex">
      <SkyCard>
        <!-- 搜索条件 -->
        <el-form v-show="pageData.showSearch" :inline="true">
          <el-row>
            <el-form-item label="账号" prop="username">
              <el-input
                style="width: 240px"
                placeholder="请输入用户账号"
                v-model="pageData.pageParams.username"
                clearable
                @keyup.enter.native="method.handleSearch"
              ></el-input>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-input
                style="width: 240px"
                placeholder="请输入用户姓名"
                v-model="pageData.pageParams.name"
                clearable
                @keyup.enter.native="method.handleSearch"
              ></el-input>
            </el-form-item>
            <el-form-item label="性别" prop="gender">
              <el-select v-model="pageData.pageParams.gender" style="width: 240px" clearable>
                <el-option
                  v-for="item in skyDict['性别']"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input
                style="width: 240px"
                placeholder="请输入邮箱"
                v-model="pageData.pageParams.email"
                clearable
                @keyup.enter.native="method.handleSearch"
              ></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="mobile">
              <el-input
                style="width: 240px"
                placeholder="请输入电话"
                v-model="pageData.pageParams.mobile"
                clearable
                @keyup.enter.native="method.handleSearch"
              ></el-input>
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <el-select v-model="pageData.pageParams.status" style="width: 240px" clearable>
                <el-option label="启用" :value="true"/>
                <el-option label="禁用" :value="false"/>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="search" plain v-throttle="method.handleSearch">搜索</el-button>
              <el-button type="danger" icon="refresh" plain v-debounce="method.resetSearch">重置</el-button>
              <el-button v-if="isScreen" circle @click="method.handleIsTreeOrTable">
                <template #icon>
                  <el-tooltip content="显示数据字段" placement="top">
                    <el-icon>
                      <DArrowLeft/>
                    </el-icon>
                  </el-tooltip>
                </template>
              </el-button>
            </el-form-item>
          </el-row>
        </el-form>
        <!-- 表格头部按钮 -->
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button type="primary" icon="plus" plain @click="method.handleAdd()">新增</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="danger" icon="delete" plain @click="method.handleBatchDelete()" :disabled="pageData.multiple">
              删除
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="success" icon="edit" plain @click="method.handleUpdate(null)" :disabled="pageData.single">
              修改
            </el-button>
          </el-col>
        </el-row>
        <br/>
        <!-- 表格头部按钮 -->
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button type="warning" icon="download" plain @click="method.handleDownload">导出</el-button>
          </el-col>
          <SkyToolbar v-model:showSearch="pageData.showSearch" v-model:showColumns="pageData.showTable"
                      @refreshTable="method.handleListPage"></SkyToolbar>
        </el-row>
        <br/>
        <!-- 数据表格 -->
        <el-table
          v-loading="pageData.loading"
          border
          :data="pageData.tableList"
          empty-text="暂时没有数据哟🌻"
          @selection-change="method.handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" fixed="left"/>
          <el-table-column v-if="fieldVisible('用户账号', pageData.showTable)" label="用户账号" prop="username"
                           width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column v-if="fieldVisible('头像', pageData.showTable)" label="头像" prop="avatar"
                           width="150" align="center" :show-overflow-tooltip="true">
            <template #default="scope">
              <div class="flex justify-center">
                <el-image
                  class="rounded-full w-36px h-36px"
                  :preview-teleported="true"
                  :preview-src-list="[scope.row.avatar]"
                  :src="
                  scope.row.avatar != null && scope.row.avatar != ''
                    ? scope.row.avatar
                    : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
                "
                >
                  <template #error>
                    <el-icon class="c-[--el-color-primary]" :size="36">
                      <CircleCloseFilled/>
                    </el-icon>
                  </template>
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="fieldVisible('邮箱', pageData.showTable)" label="邮箱" prop="email"
                           width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column v-if="fieldVisible('电话', pageData.showTable)" label="电话" prop="mobile"
                           width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column v-if="fieldVisible('性别', pageData.showTable)" label="性别" prop="gender"
                           width="150" align="center" :show-overflow-tooltip="true">
            <template #default="scope">
              <SkyTag :tagOptions="skyDict['性别']" :value="scope.row.gender"></SkyTag>
            </template>
          </el-table-column>
          <el-table-column v-if="fieldVisible('姓名', pageData.showTable)" label="姓名" prop="name"
                           width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column v-if="fieldVisible('名', pageData.showTable)" label="名" prop="first_name"
                           width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column v-if="fieldVisible('姓', pageData.showTable)" label="姓" prop="last_name"
                           width="150" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column v-if="fieldVisible('用户类型', pageData.showTable)" label="用户类型" prop="user_type"
                           width="150" align="center" :show-overflow-tooltip="true">
            <template #default="scope">
              <SkyTag :tagOptions="skyDict['用户类型']" :value="scope.row.user_type"></SkyTag>
            </template>
          </el-table-column>
          <el-table-column v-if="fieldVisible('所属部门', pageData.showTable)" label="所属部门" prop="dept"
                           width="150" align="center" :show-overflow-tooltip="true">
            <template #default="scope">
              {{ scope.row.dept?.name }}
            </template>
          </el-table-column>
          <el-table-column v-if="fieldVisible('所属岗位', pageData.showTable)" label="所属岗位" prop="post"
                           width="150" align="center" :show-overflow-tooltip="true">
            <template #default="scope">
              {{ scope.row.post?.name }}
            </template>
          </el-table-column>
          <el-table-column label="状态" prop="status" width="150" align="center" :show-overflow-tooltip="true">
            <template #default="scope">
              <el-switch
                v-model="scope.row.status"
                class="ml-2"
                inline-prompt
                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                active-text="启用"
                inactive-text="禁用"
              />
            </template>
          </el-table-column>
          <el-table-column label="备注" prop="remark" width="200" align="center" :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="排序" prop="sort" width="100" align="center"
                           :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="数据归属部门" prop="belong_dept" width="170" align="center"
                           :show-overflow-tooltip="true">
            <template #default="scope">
              {{ useSkyDeptObj(skyDept.dept, scope.row.belong_dept) }}
            </template>
          </el-table-column>
          <el-table-column label="创建人" prop="creator" width="150" align="center"
                           :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="修改人" prop="modifier" width="150" align="center"
                           :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="创建时间" prop="create_time" width="180" align="center"
                           :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="修改时间" prop="update_time" width="180" align="center"
                           :show-overflow-tooltip="true"></el-table-column>
          <el-table-column label="操作" align="center" width="120" fixed="right">
            <template #default="{ row }">
              <el-tooltip content="修改🌻" placement="top">
                <el-button
                  type="primary"
                  icon="Edit"
                  circle
                  plain
                  @click="method.handleUpdate(row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除🌻" placement="top">
                <el-button
                  type="danger"
                  icon="Delete"
                  circle
                  plain
                  @click="method.handleDelete(row)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <br/>
        <!-- 分页 -->
        <el-pagination
          v-model:current-page="pageData.pageParams.page"
          v-model:page-size="pageData.pageParams.pageSize"
          v-show="pageData.total > 0"
          background
          :page-sizes="[10, 20, 50, 100, 200]"
          :layout="isScreen?'total, sizes, jumper':'total, sizes, prev, pager, next, jumper'"
          :total="pageData.total"
          @size-change="method.handleListPage"
          @current-change="method.handleListPage"
        />
        <!-- 添加 OR 修改 -->
        <SkyDrawer
          ref="skyDrawerRef"
          :title="pageData.title"
          @skyConfirm="method.handleConfirm"
          @skyCancel="method.handleCancel"
          :loading="pageData.confirmLoading"
        >
          <template #content>
            <el-form ref="formRef" :rules="pageData.rules" :model="pageData.form" label-width="auto" status-icon>
              <el-row>
                <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                  <el-form-item label="用户名" prop="username">
                    <el-input v-model="pageData.form.username" placeholder="请输入用户名" clearable/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                  <el-form-item label="密码" prop="password">
                    <el-input v-model="pageData.form.password" placeholder="请输入密码" clearable/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                  <el-form-item label="用户头像" prop="avatar">
                    <SkyUploadImage v-model:imageUrl="pageData.form.avatar">
                      <template #content>
                        <el-icon>
                          <Avatar/>
                        </el-icon>
                        <span>请上传头像</span>
                      </template>
                      <template #tip>图片最大为 3M</template>
                    </SkyUploadImage>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                  <el-form-item label="邮箱" prop="email">
                    <el-input v-model="pageData.form.email" placeholder="请输入邮箱" clearable/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                  <el-form-item label="电话" prop="mobile">
                    <el-input v-model="pageData.form.mobile" placeholder="请输入电话" clearable/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                  <el-form-item label="性别" prop="gender">
                    <el-select v-model="pageData.form.gender" clearable>
                      <el-option
                        v-for="item in skyDict['性别']"
                        :key="item.name"
                        :label="item.name"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                  <el-form-item label="姓名" prop="name">
                    <el-input v-model="pageData.form.name" placeholder="请输入姓名" clearable/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                  <el-form-item label="名" prop="first_name">
                    <el-input v-model="pageData.form.first_name" placeholder="请输入名" clearable/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                  <el-form-item label="姓" prop="last_name">
                    <el-input v-model="pageData.form.last_name" placeholder="请输入姓" clearable/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                  <el-form-item label="用户类型" prop="user_type">
                    <el-select v-model="pageData.form.user_type" clearable>
                      <el-option
                        v-for="item in skyDict['用户类型']"
                        :key="item.name"
                        :label="item.name"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                  <el-form-item label="所属部门" prop="dept_id">
                    <el-tree-select
                      v-model="pageData.form.dept_id"
                      node-key="id"
                      check-strictly
                      :data="pageData.treeData"
                      :props="{children: 'children', label: 'name'}"
                      clearable
                    />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                  <el-form-item label="所属岗位" prop="post_id">
                    <el-select v-model="pageData.form.post_id" clearable>
                      <el-option
                        v-for="item in pageData.postList"
                        :key="item.name"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                  <el-form-item label="关联角色" prop="role">
                    <el-select v-model="pageData.form.role" multiple clearable>
                      <el-option
                        v-for="item in pageData.roleList"
                        :key="item.name"
                        :label="item.name"
                        :value="item.id"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                  <el-form-item label="排序" prop="sort">
                    <el-input-number style="width: 100%;" v-model="pageData.form.sort"/>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                  <el-form-item label="状态" prop="status">
                    <el-select v-model="pageData.form.status" style="width: 100%;" clearable>
                      <el-option label="启用" :value="true"/>
                      <el-option label="禁用" :value="false"/>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :xs="{ span: 24 }" :sm="{ span: 24 }">
                  <el-form-item label="备注" prop="remark">
                    <el-input v-model="pageData.form.remark" :rows="2" type="textarea" placeholder="请输入备注"/>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </template>
        </SkyDrawer>
      </SkyCard>
    </div>
  </div>
</template>

<style scoped lang="scss">
.sky-flex {
  flex-direction: row;

  .treeList {
    position: relative;
    width: 18%;

    .right {
      position: absolute;
      bottom: 20px;
      right: 20px;
    }
  }

  .tableList {
    width: 82%;
  }

  .formTree {
    width: 23%;
  }

  .form {
    width: 77%;
  }
}
</style>
